<template>
  <el-dialog title="编辑/录入班级课表" :visible.sync="dialogVisible" :close-on-click-modal="false"
             :close-on-press-escape="false" :before-close="handleClose" @close="$emit('update:visible',false)">
    <div style="padding: 40px 0;">
      <el-form label-width="120px" ref="editForm">
        <el-form-item label="校周:" prop="name">
          <div>
            第
            <el-input v-model="formData.teach_week" placeholder="填写校周" class="w-140"></el-input>
            周
          </div>
        </el-form-item>
        <el-form-item label="上传文件:">
          <el-upload
              class="upload-demo"
              :action="$uploadImg"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :before-upload="beforeAvatarUpload"
              :on-progress="progressFn"
              accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
              multiple
              :limit="1">
            <el-button size="small" class="el-icon-upload">点击上传相应文件</el-button>
            <div slot="tip" class="el-upload__tip">上传word文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <progressModule :visible.sync="progressVisible" :progressPercentNumber="progressPercentNumber"></progressModule>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="resetForm" size="small">取消</el-button>
      <el-button type="primary" @click.native="submitFormAdd" size="small">确认并提交</el-button>
    </div>
  </el-dialog>
</template>
<script>

export default {
  name: 'Dialog',
  props: ['visible','weekId'],
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if(!this.visible){
        this.formData.teach_week = '';
        this.formData.curriculum = '';
      }else{
        if(this.weekId){
          this.detailBox()
        }
      }
    }
  },
  data() {
    return {
      progressVisible: false,
      dialogVisible: this.visible,
      weekLine: 0,
      fileOption: '',
      progressPercentNumber: 0,
      formData: {
        teach_week: '', // 	整型 	必填 	1 	- 	教学周
        curriculum: '', // 	整型 	必填 	1 	- 	课程
      },
      weekOption:null
    }
  },
  created() {

  },
  methods: {
    // 获取周课详情
    async detailBox() {
      let data = await this.$fetch(this.api.curriculum.edit, {id:this.weekId})
      this.weekOption = data.vo
      this.formData.teach_week = data.vo.teach_week;
      this.formData.curriculum = data.vo.curriculum;
      console.log(data.vo)
    },
    // 提交数据
    async submitFormAdd() {
      let optionData = JSON.parse(JSON.stringify(this.formData))
      if(!this.formData.teach_week){
        this.$message.error('填写课表校周')
        return
      }
      if(!this.formData.curriculum){
        this.$message.error('上传课表文件')
        return
      }
      if(this.weekId){
        optionData.id = this.weekId
      }
      let data = await this.$post(!this.weekId?this.api.curriculum.add:this.api.curriculum.edit, optionData)
      if(!data.code){
        this.$emit('InitFn')
        this.$emit('update:visible',false)
      }else{
        this.$message.error(data.msg)
      }
      console.log(data)
    },
    handleClose() {
      this.dialogVisible = false
    },
    resetForm() {
      this.dialogVisible = false
    },
    sectionChange() {

    },
    handleSuccess(response) {
      this.formData.curriculum = response.data.name
    },
    handleRemove(file, fileList) {
      console.log('移除', file, fileList)
    },
    beforeAvatarUpload(file) {
      console.log('上传数据excel：', file)
      this.progressVisible = true
      // const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!')
      // }
      // return isLt2M
    },
    progressFn(option) {
      let n = this
      console.log('记录消息：', option, parseInt(option.percent))
      this.progressPercentNumber = parseInt(option.percent)
      if (parseInt(option.percent) === 100) {
        setTimeout(() => {
          this.progressVisible = false
        }, 2000)
      }
    }
  }
}
</script>
